<template>
  <div class="bg-white">
    <div class="form">
      <div class="w d-flex">
        <div class="btn-group">
          <button class="bg-dark text-white" aria-expanded="false">
            今日作品<i class="el-icon-caret-bottom text-white"></i>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
          </div>
        </div>

        <div class="search">
          <input
            type="text"
            class="search"
            placeholder="搜索"
            v-model="val"
            @keydown.enter="tosearch"
          />
          <i class="el-icon-search search-icon" aria-hidden="true"></i>
        </div>
        <div class="btn-group">
          <button><i class="el-icon-arrow-left"></i></button>
          <button><i class="el-icon-arrow-right"></i></button>
        </div>
      </div>
    </div>
    <div class="d-none d-md-block mt-md-4">
      <div class="w" style="padding: 0 4px">
        <ul
          class="d-lg-flex flex-row mb-4 flex-wrap tag"
          style="padding-left: 20px"
        >
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn-warning btn btn-sm
                text-black-50
              "
              >水彩</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn-warning btn btn-sm
                text-black-50
              "
              >每日一画</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn-warning btn btn-sm
                text-black-50
              "
              >打卡</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn-warning btn btn-sm
                text-black-50
              "
              >procreate</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn-warning btn btn-sm
                text-black-50
              "
              >绘本</a
            >
          </li>

          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn-warning btn btn-sm
                text-black-50
              "
              >猫咪</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >插画</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >原创</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >板绘</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >手绘</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >水彩</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >古风</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >绘画</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >少女</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >头像</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >人物</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >procreate</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >儿童插画</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >女孩</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >可爱</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >厚涂</a
            >
          </li>
          <li>
            <a
              href="#"
              class="
                d-block
                rounded-pill
                text-nowrap
                btn btn-sm
                text-666
                setgray
                bg-light
              "
              >同人</a
            >
          </li>
        </ul>
        <div class="w d-flex">
          <div class="col-md-6 col-12">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img
                    src="https://photo7n.gracg.com/d611d44fea8b129c39bb13a9b3fe98b7.jpg"
                    alt=""
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="https://photo7n.gracg.com/6a3781846cbcfbb2662ecad425454179.jpg"
                    alt=""
                  />
                </div>
              </div>

              <div class="swiper-pagination"></div>
              <div class="buttons">
                <div class="swiper-button-prev swiper-button-white"></div>
                <div class="swiper-button-next swiper-button-white"></div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-12 bg-box d-flex flex-wrap">
            <div class="col-6 col-md-4 rounded">
              <a
                href="#"
                class="d-block w-100"
                style="
                  background-image: url(https://pic2cdn.gracg.com/pic/2021/10/163478740760375.jpg);
                "
              >
                <div
                  class="bg"
                  style="
                    background-image: url(https://photo7n.gracg.com/fa409eb0fecea1a54d35a5248fb41871.png);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                  "
                ></div>
              </a>
            </div>
            <div class="col-6 col-md-4 rounded">
              <a
                href="#"
                class="d-block w-100"
                style="
                  background-image: url(https://pic2cdn.gracg.com/pic/2021/10/163478740760375.jpg);
                "
              >
                <div
                  class="bg"
                  style="
                    background-image: url(https://photo7n.gracg.com/fa409eb0fecea1a54d35a5248fb41871.png);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                  "
                ></div>
              </a>
            </div>
            <div class="col-6 col-md-4 rounded">
              <a
                href="#"
                class="d-block w-100"
                style="
                  background-image: url(https://pic2cdn.gracg.com/pic/2021/10/163478740760375.jpg);
                "
              >
                <div
                  class="bg"
                  style="
                    background-image: url(https://photo7n.gracg.com/fa409eb0fecea1a54d35a5248fb41871.png);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                  "
                ></div>
              </a>
            </div>
            <div class="col-6 col-md-4 rounded">
              <a
                href="#"
                class="d-block w-100"
                style="
                  background-image: url(https://pic2cdn.gracg.com/pic/2021/10/163478740760375.jpg);
                "
              >
                <div
                  class="bg"
                  style="
                    background-image: url(https://photo7n.gracg.com/fa409eb0fecea1a54d35a5248fb41871.png);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                  "
                ></div>
              </a>
            </div>
            <div class="col-6 col-md-4 rounded">
              <a
                href="#"
                class="d-block w-100"
                style="
                  background-image: url(https://pic2cdn.gracg.com/pic/2021/10/163478740760375.jpg);
                "
              >
                <div
                  class="bg"
                  style="
                    background-image: url(https://photo7n.gracg.com/fa409eb0fecea1a54d35a5248fb41871.png);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                  "
                ></div>
              </a>
            </div>
            <div class="col-6 col-md-4 rounded">
              <a
                href="#"
                class="d-block w-100"
                style="
                  background-image: url(https://pic2cdn.gracg.com/pic/2021/10/163478740760375.jpg);
                "
              >
                <div
                  class="bg"
                  style="
                    background-image: url(https://photo7n.gracg.com/fa409eb0fecea1a54d35a5248fb41871.png);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                  "
                ></div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w mt-4">
      <div class="row">
        <div
          class="col-6 col-lg-3 mb-4"
          style="padding: 0 12px"
          v-for="item in worksModule.workslist"
          :key="item.id"
        >
          <comp-search-item :item="item"></comp-search-item>
          <!-- <comp-index-tuijian></comp-index-tuijian> -->
        </div>
      </div>
    </div>
    <div class="w">
      <comp-to-login v-if="!token">
        <span>登录后关注更多插画师作品</span>
      </comp-to-login>
    </div>
  </div>
</template>

<script>
import CompIndexTuijian from "../components/comp-indexTuijian.vue";
import Swiper from "../assets/swiper/dist/js/swiper.min.js";
import "../assets/swiper/dist/css/swiper.min.css";
import CompToLogin from "../components/comp-toLogin.vue";

import { mapState } from "vuex";
import CompSearchItem from "../components/comp-search-item.vue";
export default {
  name: "Works",
  components: {
    CompIndexTuijian,
    CompToLogin,
    CompSearchItem,
  },
  data() {
    return {
      val: "",
      token: null,
    };
  },
  computed: {
    ...mapState(["worksModule"]),
  },
  methods: {
    // 初始化轮播图
    _initSwiper() {
      var mySwiper = new Swiper(".swiper-container", {
        autoplay: 5000, //可选选项，自动滑动
        loop: true,
        pagination: ".swiper-pagination",
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
      });
    },
    tosearch() {
      this.axios
        .get("http://127.0.0.1:8080/search", { params: { keyword: this.val } })
        .then((res) => {
          if (res.data.code == 2000) {
            this.$store.dispatch(
              "searchModule/setSearchArray2",
              res.data.result
            );
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$router.push({
        path: "/search/index_new",
        query: { key: this.val },
      });
    },
  },
  mounted() {
    this._initSwiper();
  },
  created() {
    this.token = localStorage.getItem("userToken");
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.form {
  background-color: #f1f2f3;
  padding: 20px 0;
  .btn-group {
    margin-left: 20px;
    &:last-of-type {
      background-color: #fff;
      border-radius: 6px;
      padding: 0px 2px;
      box-sizing: border-box;
      button {
        padding: 5px 10px;
        border-radius: 6px;
      }
    }
    button {
      padding: 0 4px;
      height: 40px;
      border-radius: 6px;
    }
  }
  .search {
    position: relative;
    margin: 0 0 0 10px;
    input {
      width: 968px;
      height: 40px;
      padding-left: 40px;
    }
    .search-icon {
      position: absolute;
      left: 30px;
      top: 10px;
      font-size: 20px;
    }
  }
}
.tag {
  li {
    margin-right: 6px;
    a {
      font-size: 12px;
    }
  }
}
.swiper-container {
  margin-left: 10px;
  width: 570px;
  img {
    width: 100%;
  }
}
.bg-box {
  > div {
    padding: 0 5px;
    a {
      width: 100px;
      height: 130px;
      background-size: cover;
      position: relative;
    }
  }
}
.mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10000;
}
</style>